<template>
    <view class="sms-code-container">
        <input placeholder="请输入验证码" placeholder-class="input-placeholder" type="digit" maxlength="6" :value="smsCode" @input="$emit('update:smsCode', $event.detail.value)" />
        <button :class="smsCodeClass" :disabled="isSendSmsCode" @click="getSmsCode">{{ smsCodeRemainSecondsText }}</button>
    </view>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
const props = defineProps({
    smsCode: String
});
const emit = defineEmits(['update:smsCode']);
const isSendSmsCode = ref(false);
const smsCodeTimer = ref();
const smsCodeRemainSeconds = ref(0);
const smsCodeRemainSecondsText = computed(() => {
    if (smsCodeRemainSeconds.value === 0) {
        return '获取验证码';
    } else {
        return `重新获取(${smsCodeRemainSeconds.value}秒)`;
    }
});
const smsCodeClass = computed(() => {
    if (smsCodeRemainSeconds.value <= 0) {
        return 'sms-code-enable';
    } else {
        return 'sms-code-disable';
    }
});
watch(smsCodeRemainSeconds, (newValue) => {
    if (newValue <= 0) {
        isSendSmsCode.value = false;
        clearInterval(smsCodeTimer.value);
    } else {
        isSendSmsCode.value = true;
    }
});
function decrementRemainSeconds() {
    smsCodeRemainSeconds.value--;
}
function getSmsCode() {
    smsCodeRemainSeconds.value = 60;
    smsCodeTimer.value = setInterval(decrementRemainSeconds, 1000);
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.sms-code-container {
    @extend .row-layout;
    margin: $scale * 5px 0;
    padding: $scale * 5rpx $scale * 10rpx;
    justify-content: center;
    align-items: center;
    border-radius: $scale * 8rpx;
    input {
        color: black;
        font-size: $scale * 22rpx;
        padding: $scale * 10rpx 0;
        flex: 1;
    }
    .input-placeholder {
        color: #979797;
        font-size: $scale * 16rpx;
        padding: $scale * 10rpx 0;
        flex: 1;
    }
    button {
        width: 30%;
        font-size: $scale * 16rpx;
        padding: 0;
        margin: 0;
        color: white;
        background-color: #437eff;
        border-radius: $scale * 8rpx;
    }
    .sms-code-enable {
        background-color: #437eff;
        border-radius: $scale * 4rpx;
    }
    .sms-code-disable {
        background-color: #96b7ff;
        border-radius: $scale * 4rpx;
    }
}
</style>
